<style>
body {
    padding: 0 20px;
    /* margin: 0 20px; */
}

.plug-card {
    margin-bottom: 10px;
}

.plug-card .el-card__body {
    padding: 0;
}

.plug-card .plug-tag {
    padding: 10px 7px;
    display: flex;
}

.plug-card .plug-tag .el-tag {
    margin: 10px 10px 0px 0px;
    display: flex;
}

.plug-card .plug-title {
    padding: 10px;
    font-size: small;
}

.plug-card .plug-handle {
    right: 10px;
    /* float: right; */
    width: 100%;
    height: 30px;
    position: relative;
}

.plug-card .plug-handle .plug-handle-content {
    position: absolute;
    right: 0;
    top: 0;
}

.el-image {
    width: 100%;
}

.image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: var(--el-fill-color-light);
    color: var(--el-text-color-secondary);
    font-size: 30px;
}

.plug-handle-btn {
    cursor: pointer;
}
</style>
<template>

    <el-row :gutter="20">

        <el-col :xl="3" :lg="5" :md="6" :sm="8" :xs="16" v-for="(item, index) in data.pluins" :key="index">
            <el-card class="plug-card" shadow="hover">
                <el-image :src="item.img" style="height: 230px;" fit="cover">
                    <template #error>
                        <div class="image-slot">
                            <span class="demonstration">无图</span>
                        </div>
                    </template>
                </el-image>

                <el-scrollbar>
                    <div class="plug-tag">
                        <el-tag v-for="(tag, key) in item.tag" :type="tagType(tag.type)" :key="key">{{ tag.title }}</el-tag>
                    </div>
                </el-scrollbar>
                <div class="plug-title">
                    {{ item.title }}
                </div>
                <div class="plug-handle">
                    <div class="plug-handle-content">
                        <template v-if="item.install == 1">

                            <el-text v-if="item.setting == 1" class="plug-handle-btn" size="small" type="success" @click="$router.push(`/plug/setting/${item.class}`)">配置 |
                            </el-text>
                            <el-text class="plug-handle-btn" size="small" type="success"
                                @click="uninstall(item.class)">卸载 | </el-text>
                            <el-text class="mx-1" size="small">启用 </el-text>
                            <el-switch v-model="data.installed" size="small" />
                        </template>

                        <template v-else>
                            <el-button type="danger" size="small" @click="install(item.class)">安装</el-button>
                        </template>
                    </div>
                </div>
            </el-card>
        </el-col>


    </el-row>

</template>

<script setup>

import { reactive, ref } from 'vue'
import { getPlugins, installPlugin, uninstallPlugin } from '@/apis/plugin'
import { tagType } from '@/util/common'

// const headimgRef = ref(null)
const data = reactive({
    installed: false,
    pluins: []
})

const loadData = () => {
    getPlugins().then(res => {
        data.pluins = res
    })
}

loadData();

// window.onresize = () => {
//     if (headimgRef.value) {
//         console.log(headimgRef.value[0].$el.clientHeight);
//         data.headimgHeight = headimgRef.value[0].$el.clientHeight;
//     }
// }

const install = (plugName) => {
    installPlugin(plugName).then(() => {
        // 重新加载
        loadData()
    })
}

const uninstall = (plugName) => {
    uninstallPlugin(plugName).then(() => {
        // 重新加载
        loadData()
    })
}


</script>